<template>
  <div class="robot-list-item" @click="selectRobot">
    <div class="name tac">{{ data.name }}</div>
    <div class="sprite pl10 pr10 flex flex-vcenter">
      <img :src="data.bigSprite" alt />
    </div>
    <div class="info mask">
      <div class="flex">
        <div class="row flex-d-c pr10">
          <div class="bottom-line">基础</div>
          <div v-for="(val,key) in data.baseAttr" :key="key" class="row attr">
            <span class="col12">{{attrNameMap[key]}}</span>
            <span class="col12 tar">{{val}}</span>
          </div>
        </div>
        <div class="row flex-d-c left-line pl10">
          <div class="bottom-line">成长</div>
          <div v-for="(val,key) in data.growAttr" :key="key" class="row attr">
            <span class="col12">{{attrNameMap[key]}}</span>
            <span class="col12 tar">{{val}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs } from 'vue'
const attrNameMap = {
  health: '生命', strength: '强度', defense: '防卫', speed: '速度', power: '精神', movement: '移动',
  baseExp: '经验', expPerLevel: '递增', baseMoney: '金钱', MoneyPerLevel: '递增'
}
export default {
  props: ['data'],
  emits: ['select'],
  setup(props, context) {

    const state = reactive({
      // ...props.data,
      attrNameMap
    })

    const selectRobot = ()=>{
      context.emit('select',props.data)
    }

    return {
      ...toRefs(state),
      selectRobot
    }
  },
}
</script>
<style lang="less" scoped>
@import "../../../theme.less";
.robot-list-item {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  width: 60px;
  height: 80px;
  margin: 0 5px 10px 5px;
  border-radius: 4px;
  border: 1px solid @theme-line;
  background-image: linear-gradient(45deg, @theme, @theme-line, @theme);
  font-size: 12px;
  white-space: nowrap;
  position: relative;
  .name {
    line-height: 12px;
  }
  .sprite {
    flex: 1;
  }
  .info {
    display: none;
    position: absolute;
    z-index: 999;
    padding: 10px;
    border-radius: 4px;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    background-color: @theme;
    border: 1px solid @theme-line;
    color: @theme-line;
    .attr {
      min-width: 50px;
    }
  }
  &:hover .info {
    display: block;
  }
}
</style>